<template>
    <div style="margin: 50px 100px">
        <div class="bottom-commit">
            <mai-mao-tabs class="bottom-btn" :font-size=18 :width=150 :tabs="scheduleTab" :active-tab="activeTab"
                          @activeTabChange="scheduleTabChange"></mai-mao-tabs>

        </div>

        <a-row :gutter="[24,8]">
            <a-col :span="6" v-for="(goods,index) in activeKillGoods">
                <a-card hoverable style="width: 290px;height: 370px">

                    <img
                            slot="cover"
                            alt="example"
                            style="width: 200px;height: 200px;margin-left: 40px;margin-top: 20px"
                            :src="goods.selectedSku?goods.selectedSku.pic:''"/>
                    <div>
                        <img class="sku-image" :style="goods.selectedSku.id===sku.id?'border: 1px solid red':''"
                             @mouseover="selectSku(index,sku)"
                             @click="toDetail(goods)"
                             v-for="(sku,skuIndex) in goods.skus"
                             :src="sku.pic"/>
                    </div>
                    <div class="sku-title-tool">
                        <a-tooltip placement="rightBottom">
                            <template slot="title">
                                <span>{{goods.selectedSku.skuName}}</span>
                            </template>
                            <span>
                                <a class="sku-title">{{goods.selectedSku.skuName.length>50?goods.selectedSku.skuName.substring(0,50)+'...':goods.selectedSku.skuName}}</a>
                            </span>

                        </a-tooltip>
                    </div>
                    <div style="color: #E01222;margin-top: 10px">
                        ￥
                        <span style="font-size: 24px">
                                {{goods.selectedSku.killPrice}}


                         <a-popconfirm placement="topLeft" ok-text="提交" cancel-text="取消"
                                       @visibleChange="(visible)=>imageCodeVisibleChange(visible,goods.selectedSku.id)"
                                       @confirm="verifyAndDoKill(goods.selectedSku.id)">
                                 <a-icon slot="icon" type="smile"/>
                            <div slot="title">
                               <img v-if="imageCode.open" ref="killCode" :src="imageCode.src" alt="验证码"
                                    style=" margin-top:13px"
                                    @click="fetchKillImageCode(goods.selectedSku.id)"/>
                                <div style="margin-top: 5px">
                                    <a-input v-model="imageCode.input" placeholder="请输入验证码"
                                             style="width: 150px"></a-input>
                                </div>
                            </div>
              <!--  <a-button class="kill-btn"
                          @click="openImageCode(goods.selectedSku)"
                          :style="(moment(goods.startTime)>moment(killScheduleData.now))?beginStyle:beginStyle">{{(moment(goods.startTime)>moment(killScheduleData.now))?'立即抢购':'立即抢购'}}
                </a-button>-->
                               <a-button class="kill-btn"
                                         @click="openImageCode(goods.selectedSku)"
                                         :disabled="((moment(goods.selectedSku.startTime))>(moment(killScheduleData.now)))"
                                         :style="(moment(goods.selectedSku.startTime)>moment(killScheduleData.now))?notBeginStyle:beginStyle">{{((moment(goods.selectedSku.startTime))>(moment(killScheduleData.now)))?'秒杀尚未开始':'立即抢购'}}</a-button>
                         </a-popconfirm>
                        </span>
                    </div>
                </a-card>
            </a-col>


        </a-row>


    </div>
</template>

<script>
    import MaiMaoTabs from "../../components/common/MaiMaoTabs";
    import killApplyApi from "../../api/remarketing/killApplyApi";
    import killApi from "../../api/remarketing/killApi";
    import moment from 'moment-timezone'

    export default {
        name: "killPage",
        components: {MaiMaoTabs},
        data() {
            return {
                killScheduleData: {
                    now: undefined,
                    onKillGoodsData: {},
                    scheduleGoodsData: {}

                },
                beginStyle: {
                    background: '#e01222',
                    color: 'white'
                },
                notBeginStyle: {
                    background: '#333333',
                    color: 'white'
                },
                scheduleTab: [],
                activeTab: "-1",
                activeKillGoods: [],//当前激活的tab页的秒杀商品
                imageCode: {
                    src: "",
                    open: false,
                    input: ""//用户输入的code
                },
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            moment,
            loadData() {
                killApi.queryKillOnShow().then(resp => {
                    if (resp.data.flag) {
                        let data = resp.data.data;


                        let scheduleData = data.scheduleGoodsData;
                        let tabs = []
                        tabs.push({
                            key: "-1",
                            text: "秒杀中"
                        })
                        for (let key in scheduleData) {
                            let tab = {
                                key: key,
                                text: key
                            }
                            tabs.push(tab)
                        }
                        this.scheduleTab = tabs;
                        for (let key in data.onKillGoodsData) {
                            //展示秒杀中的商品
                            let activeKillGoods = data.onKillGoodsData[key]
                            if (activeKillGoods&&activeKillGoods.length > 0) {
                                activeKillGoods.forEach(goods => {
                                    goods.selectedSku = goods.skus[0];
                                })
                                this.activeKillGoods = activeKillGoods
                                console.log(this.activeKillGoods)

                            }
                        }
                        if (this.activeKillGoods.length <= 0) {
                            console.log("haha")
                            //如果没有秒杀中的商品，则选择紧接着的一个排期的商品
                            let cnt = 0;
                            for (let key in data.scheduleGoodsData) {
                                /*if (cnt === 1) {
                                    break;
                                }*/
                                if (data.scheduleGoodsData[key]&&data.scheduleGoodsData[key].length>0){
                                    data.scheduleGoodsData[key].forEach(goods => {
                                        goods.selectedSku = goods.skus[0];
                                    })
                                    this.activeKillGoods = data.scheduleGoodsData[key];
                                    this.activeTab = key;
                                    // break;
                                }


                            }
                        }
                        this.killScheduleData = data;

                        // console.log(this.activeKillGoods)
                        // console.log(this.killScheduleData)
                        console.log("this.killScheduleData")
                    }
                })
            },
            scheduleTabChange(key) {
                this.activeTab = key
                console.log(key)
                if (key === "-1") {
                    // 已发货 待收货
                    for (let key in this.killScheduleData.onKillGoodsData) {
                        //展示秒杀中的商品
                        this.activeKillGoods = this.killScheduleData.onKillGoodsData[key]
                    }

                } else {
                    let activeKillGoods = this.killScheduleData.scheduleGoodsData[key]
                    if (activeKillGoods&&activeKillGoods.length > 0) {
                        activeKillGoods.forEach(goods => {
                            goods.selectedSku = goods.skus[0];
                        })

                    }
                    this.activeKillGoods = activeKillGoods

                    console.log(this.activeKillGoods)
                    console.log(this.killScheduleData.scheduleGoodsData)
                }
            },
            toDetail(goods) {
                console.log(goods)
                let uri = `/goodDetail?goodsInfo=${encodeURI(JSON.stringify({
                    id: goods.goodsId,
                    index: goods.specIndexes
                }))}`
                this.$router.push(encodeURI(uri))
            },
            openImageCode() {
                this.imageCode.open = true

            },
            /**
             * 选中sku
             */
            selectSku(index, selectedSku) {
                this.activeKillGoods[index].selectedSku = selectedSku
                console.log(this.activeKillGoods)
                console.log(selectedSku)
            },
            /**
             * 图片验证码打开和关闭的回调
             * @param visible true/false
             * @param killId 秒杀ID
             */
            imageCodeVisibleChange(visible, killId) {
                if (killId) {
                    console.log(visible)
                    if (visible === true) {
                        this.fetchKillImageCode(killId)
                    } else {
                        this.imageCode.open = false
                    }
                }

            },
            /**
             * 获取验证码
             * @param killId 秒杀ID
             */
            fetchKillImageCode(killId) {
                killApi.getKillCode(killId).then(resp => {
                    return 'data:image/png;base64,' + btoa(
                        new Uint8Array(resp.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
                    );
                }).then(data => {
                    console.log(data)
                    this.imageCode.src = data

                })
            },
            /**
             * 校验验证码并提交秒杀
             */
            verifyAndDoKill(killId) {
                if (this.imageCode.input.trim() === "") {
                    this.$message.warning("请先填写验证码")
                    return;
                }
                if (killId) {
                    killApi.verifyImageCode(killId, this.imageCode.input).then(resp => {
                        if (resp.data.flag) {
                            killApi.doKill(killId, resp.data.data).then(resp => {
                                if (resp.data.flag) {
                                    this.$message.success(resp.data.message)
                                }
                            })
                        }
                    })
                }

            },
        }
    }
</script>

<style scoped>
    .bottom-commit {
         height: 72px;
        width: 100%;
        top: 240px;
        text-align: center;
        border-top: #E4393C solid 2px;
        background: white;
    }

    .kill-btn {
        float: right;
        border: none
    }

    .sku-image {
        height: 25px;
        width: 25px;
        margin-right: 5px;
    }

    .sku-title-tool :hover {
        color: #ef601d;
    }

    .sku-title {
        font-size: 12px;
        color: #868686
    }
</style>